<template>
  <el-dialog
      title="选择客户"
      :visible.sync="dialogVisible"
      width="800px"
  >
    <div>
      <div class="flex-row-center">
        <el-form ref="queryCustomerForm" :model="queryParams" label-width="auto">
          <el-row :gutter="10">
           <el-col :span="8">
             <el-form-item label="客户名称">
               <el-input v-model="queryParams.customerName" placeholder="请输入客户名称"></el-input>
             </el-form-item>
           </el-col>
            <el-col :span="8">
              <el-form-item label="业务类型">
                <el-select v-model="queryParams.businessScopeCode" placeholder="请选择业务类型" @change="handleQuery">
                  <el-option
                      v-for="item in businessTypes"
                      :key="item.code"
                      :label="item.label"
                      :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <div style="margin-left: 15px">
                <el-button type="primary" @click.stop="handleQuery">搜索</el-button>
                <el-button @click="resetQuery">重置</el-button>
              </div>
            </el-col>
          </el-row>

        </el-form>

      </div>
      <div>
        <el-table
            ref="multipleTable"
            v-loading="loading"
            :data="list"
            :row-key="(row=>{return row.customerId})"
            :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border @select="selectItem"
            @select-all="selectAll">
          <template slot="empty">
            <el-empty :image-size="50" description="暂无客户信息"></el-empty>
          </template>
          <el-table-column
              key="customerId"
              type="selection"
              width="55"
              reserve-selection
          >
          </el-table-column>
          <el-table-column label="客户名称" align="center" prop="customerName" min-width="120px" show-overflow-tooltip/>
          <el-table-column label="联系方式" align="center" prop="customerPhone" min-width="120px" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="客户类型" align="center" prop="customerType" min-width="120px" show-overflow-tooltip>
            <template v-slot="{row}">
              <dict-tag :options="dict.type.customer_type" :value="row.customerTypeCode"/>
            </template>
          </el-table-column>
          <!--                    <el-table-column label="客户来源" align="center" prop="customerSource" min-width="120px" show-overflow-tooltip>-->
          <!--                        <template v-slot="{row}">-->
          <!--                            <dict-tag :options="dict.type.customer_source" :value="row.customerSource"/>-->
          <!--                        </template>-->
          <!--                    </el-table-column>-->
        </el-table>
        <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                    @pagination="getList"/>
      </div>

    </div>
    <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="confimSelectedCustomer">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
import {getCustomerList} from "@/api/memberManage/memberList";

export default {

  components: {},
  dicts: ['customer_type', 'customer_source'],
  props: {
    customerIds: {
      type: Array,
      default: (() => {
        return []
      })
    }
  },
  data() {
    return {
      businessTypes: [{
        label: '全业务客户',
        code: 1
      }, {
        label: '自营客户',
        code: 2
      }, {
        label: '渠道客户',
        code: 3
      }],
      loading: false,
      dialogVisible: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customerName: '',
        businessScopeCode: 1
      },
      total: 0,
      list: [],
      checkList: []
    }
  },
  computed: {},
  methods: {
    selectItem(list, row) {
      this.checkList = list
    },
    selectAll(selection) {
      // 若取消全选，当前页的选中数据移除
      if (selection.length === 0) {
        const ids = this.list.map((i) => {
          return i.customerId
        })
        for (var i = 0; i < this.checkList.length; i++) {
          if (ids.indexOf(this.checkList[i].customerId) > -1) {
            this.checkList.splice(i, 1)
            i--
          }
        }
      }
      const arr = [...selection, ...this.checkList]
      this.checkList = Array.from(new Set(arr))
    },
    // 确定
    confimSelectedCustomer() {
      this.$emit('success', this.checkList)
      this.close()
    },
    show() {
      this.dialogVisible = true
      this.$nextTick(() => {
        if (this.customerIds && this.customerIds.length > 0) {
          this.checkList = []
          this.list.map(row => {
            this.customerIds.map(id => {
              if (row.customerId == id) {
                this.checkList.push(row)
                this.$refs.multipleTable.toggleRowSelection(row, true)
              }
            })
          })
        }
      })
    },
    close() {
      this.dialogVisible = false
    },
    resetQuery() {
      this.queryParams.customerName = null
      this.handleQuery()
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    getList() {
      this.loading = true
      getCustomerList(this.queryParams).then(res => {
        this.list = res.rows;
        this.total = res.total;
      }).finally(() => {
        this.loading = false
      })
    }

  },
  mounted() {
    this.$nextTick(() => {
      this.getList()
    })
  },

}
</script>

<style lang="scss" scoped>
.queryView {
  position: relative;
  top: -8px;
  margin-left: 30px;
}
</style>
